<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'add.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
   		<center>
   			<h1>注册</h1>
   			<form action="add" enctype="multipart/form-data" method="post" onsubmit="return check()">
   				<input type="file" name="mu" value="上传头像"><br/>
   				新账号<input type="text" name="userAccount" onblur="chName();"/><span id="a"></span><br/>
   				新密码<input type="password" name="password"/><span id="b"></span><br/>
   				确认密码<input type="password" name="password2" /><span id="c"></span><br/>
   				邮箱<input type="text" name="email"/><span id="d"></span><br/>
   				部门 
    					<select name="deptId">
    						<option value="">请选择</option>
    						<c:forEach items="${allDepts}" var="allDepts">
    						<option <c:if test="${allDepts.deptId==deptId }">selected</c:if> value="${allDepts.deptId }">${allDepts.deptName }</option>
    						</c:forEach>
    					</select>
   				<span id="e"></span><br/>
   				<input type="submit" value="确认"/>
    			<input type="reset" value="取消"/>
   			</form>
   		</center>
   		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
   		<script type="text/javascript">
   			
   			function chName(){
   				var userAccount = $("[name=userAccount]").val(); 
   				$.post("cheName?userAccount="+userAccount,function(data){
   					if(data!="false"){
   						$("#a").text("账号已存在");
   					}else{
   						$("#a").text("账号可以使用");
   					}
   				})
   			}
   			
   			function check(){
   				var userAccount = $("[name=userAccount]").val();
   				var password = $("[name=password]").val();
   				var password2 = $("[name=password2]").val();
   				var email = $("[name=email]").val();
   				var deptId = $("[name=deptId]").val();
   				
   				var reg = /^[a-zA-Z0-9]{6,20}$/;
   				var regEmail = /^\w+@\w{2,3}.\w{2,3}$/;
   				
   				if(userAccount==""){
   					$("#a").text("账号不能为空");
   						return false;
   				}else{
   					$("#a").text("");
   				}
   				
   				if(!reg.test(password)){
   					$("#b").text("格式错误，英文加数字");
   						return false;
   				}else{
   					$("#b").text("");
   				}
   				
   				if(password!=password2){
   					$("#c").text("与上次输入不一致");
   					return false;
   				}else{
   					$("#c").text("");
   				}
   				
   				if(!regEmail.test(email)){
   					$("#d").text("邮箱格式错误");
   						return false;
   				}else{
   					$("#d").text("");
   				}
   				
   				if(deptId==""){
   					$("#e").text("请选择部门");
   					return false;
   				}else{
   					$("#e").text("");
   				}
   				
   					
   				return true;
   			}
   		</script>
  </body>
</html>

